<template>
  <div>
    <el-autocomplete
      v-model="employeeName"
      v-loading="loading"
      class="inline-input"
      :fetch-suggestions="selectEmployeeList"
      :disabled="disabled"
      placeholder="请输入员工名称"
      style="width: 100%"
      clearable
      @select="handleSelectEmployee"
    >
      <template slot-scope="{ item }">
        <div>{{ item.employeeName }}</div>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>

import { selectEmployeeByName } from '@/api/base-data/employee'

export default {
  name: 'EmployeeQuery',
  props: {
    value: {
      type: String,
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      employeeName: '',
      id: this.value,
      loading: false
    }
  },
  methods: {
    init(employeeName) {
      this.employeeName = employeeName
    },
    resetQueryForm() {
      this.employeeName = ''
      this.id = undefined
    },
    // 员工选中
    handleSelectEmployee(row) {
      if (row) {
        this.employeeName = row.employeeName
        this.$emit('choose', row)
      }
    },
    selectEmployeeList(query, callback) {
      this.loading = true
      selectEmployeeByName({ employeeName: query }).then(resp => {
        if (resp.success) {
          callback(resp.data)
        }
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style scoped>

</style>
